import { Chess } from "./Chess";
import { Chesstype } from "../types/enums";
import './Board.css'
interface Iprops {
  name?: string
  over: boolean
  num?: number
  cellW?: number
  chesses: Chesstype[]
  onClick?: (n: number) => void
}
export const Board: React.FC<Iprops> = function (props) {
  const { chesses, cellW = 50, num = 3, onClick = () => { }, over } = props
  const list = chesses.map((type, i) => <Chess key={i} type={type} onClick={() => {
    !over && onClick(i)
  }} />)

  const style = { width: cellW * num + 'px' }
  return (
    <div className="Board" style={style}>
      {list}
    </div>
  );
}

// 设置属性默认值
// 1. 把属性约束设置为可选属性  onClick?: (n:number)=>void
// 2. Board.defaultProps
Board.defaultProps = {
  name: 'ggg',
}

